<template>
  <view class="container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="header" :style="{ top: statusBarHeight + 'px' }">
      <view class="header-left" @click="goBack">
        <text class="tn-icon tn-icon-left"></text>
        <text class="header-text">返回</text>
      </view>
      <view class="header-title">发布动态</view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      :style="{ paddingTop: `calc(${statusBarHeight}px + 90rpx)` }"
    >
      <!-- 封面图片上传 -->
      <view class="section">
        <view class="section-title">
          <text class="tn-icon-image text-icon"></text>
          <text>封面图片</text>
        </view>
        <view class="image-uploader-container">
          <image-uploader @uploadSuccess="uploadSuccess"/>
        </view>
      </view>

      <!-- 视频上传 -->
      <view class="section">
        <view class="section-title">
          <text class="tn-icon-video text-icon"></text>
          <text>上传视频</text>
        </view>
        <view class="video-uploader-container">
          <video-uploader @videoSuccess="videoSuccess"/>
        </view>
      </view>

      <!-- 标题输入 -->
      <view class="section">
        <input 
          class="title-input" 
          v-model="title" 
          placeholder="写个标题吧..." 
          placeholder-class="placeholder"
          maxlength="50"
        />
        <view class="title-count">{{ title.length }}/50</view>
      </view>

      <!-- 正文输入 -->
      <view class="section">
        <textarea 
          class="content-input" 
          v-model="content" 
          placeholder="分享你的美妆心得..." 
          placeholder-class="placeholder"
          maxlength="500"
        />
        <view class="word-count">{{ content.length }}/500</view>
      </view>

      <!-- 话题选择 -->
      <view class="section">
        <view class="section-title">
          <text class="tn-icon-topic text-icon"></text>
          <text>选择话题</text>
        </view>
        <topic-selector :topics="topics" @selectTopic="selectTopic"/>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <view class="footer-content">
        <view class="footer-item" @click="saveDraft">
          <text class="tn-icon-folder"></text>
          <text class="footer-text">草稿</text>
        </view>
        <view class="footer-item" @click="previewPost">
          <text class="tn-icon-eye"></text>
          <text class="footer-text">预览</text>
        </view>
        <view class="submit-button" @click="publishArticle">发布</view>
      </view>
    </view>
  </view>
</template>

<script>
import ImageUploader from "@/components/image/ImageUploader.vue";
import VideoUploader from "@/components/video/VideoUploader.vue";
import TopicSelector from "@/components/topic/TopicSelector.vue";
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { createArticle } from '@/api/article'
import {getTopicPage} from "@/api/topic";
import {getDictData} from '@/api/article'

export default {
  mixins: [template_page_mixin],

  components: {
    ImageUploader,
    VideoUploader,
    TopicSelector
  },
  data() {
    return {
      statusBarHeight: 0,
      isSelected: false,

      title: '',
      content: '',
      coverImage:'',
      videoUrl:'',
      topicCode:'',
      topics: [], // 示例话题列表
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isAllData:true
      },
    }
  },
  created() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
  },
  mounted(){
    this.queryTopicList();
    this.getDictList()
  },

  //当isSelected 发生变动的时候的函数
  // watch: {
  //   isSelected(newVal) {
  //     if (newVal) {
  //       this.topicCode = this.id
  //     } else {
  //       console.log(newVal)
  //       this.topicCode = null
  //     }
  //   }
  // },
  methods: {
    getDictList(){
      getDictData(1,4,"article_topic").then(res=>{
        console.log(res)
        const list = res.data.data.list;
        //list遍历去掉对象中label = 首页与关注的值
        const newlist = list.filter(item => item.label !== '首页' && item.label !== '关注')
        //遍历把每一个label 的值再放到对象中的name中去
        for (let i = 0; i < newlist.length; i++) {
          newlist[i].name = newlist[i].label
          newlist[i].id = newlist[i].value
        }
       this.topics = newlist
      })
    },
    selectTopic(id){
      this.topicCode = id
    },
    queryTopicList(){
      getTopicPage(this.queryParams).then(res => {
        this.topics = res.data.data.list
        console.log(res.data)
      })
    },
    videoSuccess(file){
      this.videoUrl = file
    },
    uploadSuccess(file){
      this.coverImage = file
    },
    publishArticle() {
      if (!this.title.trim()) {
        uni.showToast({
          title: '请输入标题',
          icon: 'none'
        })
        return
      }

      const param = {
        title: this.title,
        content: this.content,
        coverImage: this.coverImage,
        videoUrl: this.videoUrl,
        topicCode: this.topicCode
      }

      createArticle(param).then(res => {
        if(res.data.code == 0) {
          uni.showToast({
            title: '发布成功',
            icon: 'success',
            duration: 1500,
            success: () => {
              // 延迟返回，让用户看到提示
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          })
        }
      })
    },
    goBack() {
      uni.navigateBack()
    },
    saveDraft() {
      uni.showToast({
        title: '已保存到草稿箱',
        icon: 'success'
      })
    },
    previewPost() {
      uni.showToast({
        title: '预览功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
}

.status-bar {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 1000;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  height: 90rpx;
  background: #fff;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  &-left {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666;
  }

  &-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
}

.content-scroll {
  height: calc(100vh - env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  &-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;

    .text-icon {
      color: #FF85AD;
      margin-right: 10rpx;
      font-size: 36rpx;
    }
  }
}

.title-input {
  font-size: 36rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  font-weight: 500;
  width: 100%;
  min-height: 100rpx;
}

.title-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  padding: 0 10rpx;
}

.placeholder {
  color: #999;
  font-size: 36rpx;
  font-weight: normal;
}

.content-input {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  line-height: 1.5;
  padding: 20rpx 0;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  &-content {
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  }

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 40rpx;
    color: #666;

    .tn-icon-folder, .tn-icon-eye {
      font-size: 40rpx;
      margin-bottom: 6rpx;
    }

    .footer-text {
      font-size: 24rpx;
    }
  }
}

.submit-button {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(45deg, #FF85AD, #FFA6C1);
  border-radius: 40rpx;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 133, 173, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(255, 133, 173, 0.2);
  }
}

.image-uploader-container, .video-uploader-container {
  margin-top: 10rpx;
}
</style>
